<template>
    <div class="player-wrap">
      <div class="list">
        <MusicList v-on:loadsong="songload" :songList="searchSongList" v-show="listOpen"></MusicList>
      </div>
      <div class="player">
        <div class="bar">
          <div class="disc" :class="{scroll:musicplaying}">
            <img src="./images/disc.png" class="logo" alt />
            <img :src="$store.state.user.avatar" class="music-pic" alt />
          </div>
          <div class="author">
            <div class="music-name">{{currentSongName || 'relax ~，~'}}</div>
          </div>
        </div>
        <div class="opt">
          <div class="operations"> 
            <div class="search">
              <input placeholder="输入关键字" v-model="keyWords" :style="{width:'80px',paddingLeft:'10px'}" type="text" />
              <el-button size="mini" @click="search(keyWords)" plain>搜索</el-button>
            </div>
            <div class="icon-list">
              <i @click="openList" class="el-icon-s-operation"></i>
            </div>
          </div>
          <div class="audio-wrap">
            <audio
              ref="audio"
              :src="musicurl"
              @ended="ended"
              class="audio"
              controls
              autoplay
              loop="loop"
              @play="play"
              @pause="pause"
            ></audio>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { search, getSongUrl, getSongDetails, getSongMV } from "../../api/music";
import MusicList from "./MusicList";
export default {
  name: "",
  data() {
    return {
      listOpen: false,
      optOpen: true,
      keyWords: "",
      searchSongList: [],
      testUrl:"",
      musicurl: "",
      musicplaying: false,
      currentSongName: ""
    };
  },
  methods: {
    openList() {
      this.listOpen = !this.listOpen;
    },
    async search(keyWords) {
      const { data } = await search(keyWords);
      this.searchSongList = data.result.songs;
      console.log(this.searchSongList);
      this.listOpen = true;
    },
    play() {
      this.musicplaying = true;
      this.autoplay = "autoplay";
    },
    songload(url, songName) {
      this.musicurl = url;
      this.currentSongName = songName;
    },
    pause() {
      this.musicplaying = false;
    },
    ended() {
      let audio = this.$refs.audio;
      audio.src = this.testUrl;
      audio.autoplay = "autoplay";
      audio.play();
    }
  },

  components: {
    MusicList
  }
};
</script>
<style scpoed>
@import "./css/player.min.css";
</style>
